<script>
import request from "../../utils/Request.js";
import CryptoJS from "crypto-js";
import {ElMessage} from "element-plus";
import router from "../../router/index.js";

export default {
  name: "PasswordCard",
  data() {
    return {
      disableButton: false,
      password: {
        oldPassword: '',
        newPassword: '',
        confirmPassword: ''
      },
      rules: {
        oldPassword: [{
          validator: (rule, value, callback) => {
            if (value === '')
              callback(new Error('请输入密码'))
            else if (!new RegExp("^[a-zA-Z0-9]{6,18}$").test(value))
              callback(new Error('请输入6到18位的不包括特殊字符的密码'))
            else
              callback()
          }, trigger: 'blur'
        }],
        newPassword: [{
          validator: (rule, value, callback) => {
            if (value === '')
              callback(new Error('请输入新密码'))
            else if (!new RegExp("^[a-zA-Z0-9]{6,18}$").test(value))
              callback(new Error('请输入6到18位的不包括特殊字符的密码'))
            else if (value === this.password.oldPassword)
              callback(new Error('新旧密码一致，无需修改'))
            else
              callback()
          }, trigger: 'blur'
        }],
        confirmPassword: [{
          validator: (rule, value, callback) => {
            if (value === '')
              callback(new Error('请再一次输入密码'))
            else if (value !== this.password.newPassword)
              callback(new Error('两次输入的密码不一致'))
            else
              callback()
          }, trigger: 'blur'
        }]
      },
    }
  },
  methods: {
    modifyPassword() {
      let form = this.$refs['passwordFormRef']

      form.validate(valid => {
        if (valid) {
          request({
            method: 'post',
            url: '/api/uaa/user/password',
            data: {
              oldPassword: CryptoJS.SHA256(this.password.oldPassword).toString(CryptoJS.enc.Hex),
              newPassword: CryptoJS.SHA256(this.password.newPassword).toString(CryptoJS.enc.Hex)
            }
          })
              .then(resp => {
                let data = resp.data;
                if (data.code === 0) {
                  ElMessage.success('修改密码成功\n请重新登录');
                  router.push('/logout')
                } else if (data.code === 1201) {
                  ElMessage.error('旧密码错误!请重新输入')
                } else {
                  ElMessage.error(data.msg)
                }
              })
              .catch(() => {
                ElMessage.error('出现未知错误')
              })
        }
      })
    }
  }
}
</script>

<template>
  <el-card>
    <el-form
        ref="passwordFormRef"
        status-icon
        :model="password"
        :rules="rules"
    >
      <el-form-item prop="oldPassword" key="oldPassword" label="旧密码" label-width="70">
        <el-input class=" mb-5" size="large" v-model="password.oldPassword" placeholder="旧密码"
                  type="password"
                  show-password
                  clearable maxlength="20"/>
      </el-form-item>

      <el-form-item prop="newPassword" key="newPassword" label="新密码" label-width="70">
        <el-input class=" mb-5" size="large" v-model="password.newPassword" placeholder="新密码"
                  type="password"
                  show-password
                  clearable maxlength="20"/>
      </el-form-item>
      <el-form-item prop="confirmPassword" key="confirmPassword" label="确认密码" label-width="70">
        <el-input class=" mb-5" size="large" v-model="password.confirmPassword" placeholder="再输入新密码"
                  type="password"
                  show-password
                  clearable maxlength="20"/>
      </el-form-item>
      <el-form-item key="submit" label-width="70">
        <el-button type="primary" @click="modifyPassword" :disabled="disableButton"
                   color="#eebe77"
        >
          修改密码
        </el-button>
      </el-form-item>
      <el-text size="small">忘记密码了？可以在退出登录后再进行密码重置</el-text>
    </el-form>
  </el-card>
</template>

<style scoped>

</style>